import type { categoryNameType } from '../../types/constants'
import type { PlatformElementConfig } from '../../types/interfaces'
import type {
  ElementGroupType,
  FocusModeConfig,
  IStyleGroup,
  IStyleProperties,
  StyleProperty,
  StylePropertyItem,
} from './interfaces'
import { CATEGORY_NAME_CONFIG } from '../../types/constants'
import { SYMBOLS } from '../../types/interfaces'
/**
 * 样式属性分组配置
 */
export const STYLE_PROPERTY_GROUPS: Record<string, IStyleGroup> = {
  layout: {
    label: '布局',
    icon: '📏',
  },
  typography: {
    label: '排版',
    icon: '🔤',
  },
  color: {
    label: '颜色',
    icon: '🎨',
  },
  effects: {
    label: '效果',
    icon: '✨',
  },
}

/**
 * 样式单位
 */
export const UNITS: { value: string, label: string }[] = [
  { value: 'px', label: 'px' },
  { value: '%', label: '%' },
  { value: 'em', label: 'em' },
  { value: 'rem', label: 'rem' },
]

export function valueFormatter(value: number, unit: string) {
  return `${value}${unit}`
}

/**
 * 样式属性配置
 */
export const DEFAULT_STYLE_PROPERTIES_CONFIG = { count: 1, layout: 'vertical', gap: 8 }
export const STYLE_PROPERTIES: Record<string, IStyleProperties> = {
  'width': { label: '宽度', category: 'layout', component: {
    type: 'RangeSlider',
    props: [{
      id: 'width',
      label: '宽度',
      min: 0,
      max: 1000,
      step: 0.1,
      valueFormatter,
      selectOptions: {
        id: 'width-select',
        options: UNITS,
        selectedValue: 'px',
      },
    }],
  } },
  'height': { label: '高度', category: 'layout', component: {
    type: 'RangeSlider',
    props: [{
      id: 'height',
      label: '高度',
      min: 0,
      max: 1000,
      step: 0.1,
      valueFormatter,
      selectOptions: {
        id: 'height-select',
        options: UNITS,
        selectedValue: 'px',
      },
    }],
  } },
  'padding': { label: '内边距', category: 'layout', component: {
    type: 'RangeSlider',
    count: 4,
    props: [
      { id: 'padding-top', label: '上内边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'padding-top-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'padding-right', label: '右内边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'padding-right-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'padding-bottom', label: '下内边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'padding-bottom-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'padding-left', label: '左内边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'padding-left-select',
        options: UNITS,
        selectedValue: 'px',
      } },
    ],
    layout: 'vertical',
    gap: 8,
  } },
  'margin': { label: '外边距', category: 'layout', component: {
    type: 'RangeSlider',
    count: 4,
    props: [
      { id: 'margin-top', label: '上外边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'margin-top-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'margin-right', label: '右外边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'margin-right-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'margin-bottom', label: '下外边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'margin-bottom-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'margin-left', label: '左外边距', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'margin-left-select',
        options: UNITS,
        selectedValue: 'px',
      } },
    ],
    layout: 'vertical',
    gap: 8,
  } },
  'border-width': { label: '边框宽度', category: 'layout', component: {
    type: 'RangeSlider',
    count: 4,
    props: [
      { id: 'border-width-top', label: '上边框宽度', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'border-width-top-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'border-width-right', label: '右边框宽度', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'border-width-right-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'border-width-bottom', label: '下边框宽度', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'border-width-bottom-select',
        options: UNITS,
        selectedValue: 'px',
      } },
      { id: 'border-width-left', label: '左边框宽度', min: 0, max: 100, step: 0.01, valueFormatter, selectOptions: {
        id: 'border-width-left-select',
        options: UNITS,
        selectedValue: 'px',
      } },
    ],
    layout: 'vertical',
    gap: 8,
  } },

  'font-size': { label: '字体大小', category: 'typography', component: {
    type: 'RangeSlider',
    count: 1,
    props: [
      { id: 'font-size', label: '字体大小', min: 0, max: 100, step: 0.1, valueFormatter, selectOptions: {
        id: 'font-size-select',
        options: UNITS,
        selectedValue: 'px',
      } },
    ],
    layout: 'vertical',
  } },
  'line-height': { label: '行高', category: 'typography', component: {
    type: 'RangeSlider',
    count: 1,
    props: [
      { id: 'line-height', label: '行高', min: 0, max: 100, step: 0.1 },
    ],
    layout: 'vertical',
  } },
  'font-weight': { label: '字体粗细', category: 'typography', component: {
    type: 'RangeSlider',
    count: 1,
    props: [
      { id: 'font-weight', label: '字体粗细', min: 0, max: 100, step: 1 },
    ],
    layout: 'vertical',
  } },
  'font-style': { label: '字体样式', category: 'typography' },
  'text-decoration': { label: '文本装饰', category: 'typography' },

  'color': { label: '文字颜色', category: 'color', component: {
    type: 'ColorPicker',
    count: 1,
    props: [
      { id: 'color', label: '文字颜色', default: '#000000' },
    ],
    layout: 'vertical',
  } },
  'background-color': { label: '背景颜色', category: 'color', component: {
    type: 'ColorPicker',
    count: 1,
    props: [
      { id: 'background-color', label: '背景颜色', default: '#000000' },
    ],
    layout: 'vertical',
  } },
  'border-color': { label: '边框颜色', category: 'color', component: {
    type: 'ColorPicker',
    count: 4,
    props: [
      { id: 'border-color-top', label: '上边框颜色', default: '#000000' },
      { id: 'border-color-right', label: '右边框颜色', default: '#000000' },
      { id: 'border-color-left', label: '下边框颜色', default: '#000000' },
      { id: 'border-color-bottom', label: '左边框颜色', default: '#000000' },
    ],
    layout: 'vertical',
    gap: 8,
  } },

  'opacity': { label: '透明度', category: 'effects' },
}

/**
 * 快速预设
 */
export const QUICK_PRESETS: { label: string, value: string, icon: string, description: string }[] = [
  { label: '重置样式', value: 'all: initial', icon: SYMBOLS.STATUS.REFRESH, description: '重置所有CSS样式' },
  { label: '无边框', value: 'border: none', icon: SYMBOLS.OTHERS.CUT, description: '移除所有边框样式' },
  { label: '无轮廓', value: 'outline: none', icon: SYMBOLS.COLOR_SQUARES.WHITE, description: '移除元素轮廓线' },
  { label: '透明背景', value: 'background: transparent', icon: SYMBOLS.OTHERS.GHOST, description: '设置透明背景' },
]

export const FOCUS_MODE_CONFIG: FocusModeConfig = {
  elements: {
    // 显示与隐藏（toggle|hide|show）
    announcement: {
      selector: '.announcement-container',
      action: 'toggle',
    },
    userCenterTitle: {
      selector: '.user-center .user-center-title',
      action: 'toggle',
    },
    tabs: {
      selector: '.tab-container .tabs',
      action: 'toggle',
    },
    basicSettings: {
      selector: '.personalization-settings .setting-group[data-category!="advanced-settings"]',
      action: 'toggle',
    },
    advancedSettingsTitle: {
      selector: '.personalization-settings .setting-group[data-category="advanced-settings"] h3',
      action: 'toggle',
    },
    advancedSettingsToolbar: {
      selector: '.personalization-settings > .custom-toolbar-container',
      action: 'toggle',
    },
    settingActions: {
      selector: '.personalization-settings .setting-group-list > .actions',
      action: 'toggle',
    },

    // 控制显示样式
    swalActions: {
      selector: '.swal2-actions',
      action: 'display',
      value: ['none', 'flex'], // [focusModeValue, normalValue]
    },

    // 控制其他样式
    userCenter: {
      selector: '.user-center',
      styles: {
        height: ['750px', '600px'], // 高度为最大高度减去 .editor-step 的高度以及一些空白高度
      },
    },
    advancedSettings: {
      selector: '.personalization-settings .setting-group[data-category="advanced-settings"]',
      styles: {
        'margin-bottom': ['100px', ''],
        'background-color': ['#ffffff', ''],
        'border': ['none', ''],
      },
    },
    advancedSettingsEditorStep: {
      selector: '.personalization-settings .setting-group[data-category="advanced-settings"] .setting-item .style-editor .editor-step',
      styles: {
        'position': ['fixed', ''],
        'top': ['-70px', ''], // 距离为 .editor-step 的高度
        'right': ['0', ''],
        'z-index': ['100', ''],
        'width': ['100%', ''],
      },
    },
    advancedSettingsEditorStepItem: {
      selector: '.personalization-settings .setting-group[data-category="advanced-settings"] .setting-item .style-editor .editor-step .step-item',
      styles: {
        'min-width': ['auto', ''],
      },
    },
  },
  // 按钮状态配置
  buttonStates: {
    active: {
      icon: '🚪',
      text: '退出专注',
    },
    inactive: {
      icon: '🧘',
      text: '专注模式',
    },
  },
}

/**
 * 样式编辑器步骤状态类型
 */
export const EDIT_TYPE_CONFIG = {
  SELECT_ELEMENT: 'selectElement',
  SELECT_STYLE: 'selectStyle',
  QUICK: 'quick',
  ADD: 'add',
  GENERATE: 'generate',
  OTHER: 'other',
}

/**
 * 根据分类名称获取该分组下的所有元素名称
 * @param data 元素属性配置
 */
export function getElementProperties(data: PlatformElementConfig[]): ElementGroupType {
  // 1. 先创建空的分组对象
  const grouped: ElementGroupType = {}

  // 2. 遍历所有元素
  data.forEach((item) => {
    const category = item.category || 'default'
    const categoryName = CATEGORY_NAME_CONFIG[category as categoryNameType] || category

    // 如果该分类不存在，初始化
    if (!grouped[category]) {
      grouped[category] = {
        name: categoryName,
        items: [],
      }
    }

    // 添加当前元素到对应分类
    grouped[category].items.push({
      id: item.id,
      label: CATEGORY_NAME_CONFIG[item.id] || item.id,
    })
  })

  return grouped
}

/**
 * 根据分组名称获取该分组下的所有样式属性
 * @param groupName 分组名称
 */
export function getStylePropertiesByGroup(groupName: string): StylePropertyItem[] {
  return Object.entries(STYLE_PROPERTIES)
    .filter(([_, config]) => config.category === groupName)
    .map(([property, attr]) => ({
      id: property as StyleProperty,
      label: attr.label,
    }))
}
